<template>
	<view class="page">
		<!-- 主体内容 -->
		<view class="store_back">
			<image :src="storeInfo.background" mode="aspectFill"></image>
		</view>
		<view class="mainContent">
			<view class="storeCard">
				<view class="store_namelogo">
					<image :src="storeInfo.logo" mode=""></image>
					<view class="storename">
						<view style="display: flex;justify-content: space-between;">
							<text>{{storeInfo.name}}</text>
							<view class="">
								<text class="iconfont icon-star" style="color: #FF6700;font-size: 30rpx;"></text>
								<text class="iconfont icon-star" style="color: #FF6700;font-size: 30rpx;"></text>
								<text class="iconfont icon-star" style="color: #FF6700;font-size: 30rpx;"></text>
								<text class="iconfont icon-star" style="color: #FF6700;font-size: 30rpx;"></text>
								<text class="iconfont icon-star" style="color: #FF6700;font-size: 30rpx;"></text>
							</view>
						</view>
						<text>店长电话：{{storeInfo.phone}} 会员推荐店</text>
					</view>
				</view>
				<view class="store_tag">
					<view class="store_tag_a">
						<view
							style='background-color: #FF6700;height: 100%;padding: 5rpx;display: flex;align-items: center;justify-content: center;'>
							<text class="iconfont icon-huangguan" style="color: #fff;"></text>
						</view>
						<text>五星品质好店</text>
					</view>
					<view class="store_tag_a">
						<view
							style='background-color: #FF6700;height: 100%;padding: 5rpx;display: flex;align-items: center;justify-content: center;'>
							<text class="iconfont icon-waimai-" style="color: #fff;"></text>
						</view>
						<text>支持配送到家</text>
					</view>

					<!-- <image src="/static/images/gurrantee_2.png" mode="widthFix"></image>
					<image src="/static/images/gurrantee_1.png" mode="widthFix"></image> -->
				</view>
				<view class="store_adress">
					<text>门店地址：{{storeInfo.address}}</text>
				</view>
				<view style="margin: 30rpx 0;">
					<u-line></u-line>
				</view>
				<!-- 会员权益 -->
				<view class="vipcontent">
					<view class="vipcontent_head">
						<u-icon name="level" color="#FF6700"></u-icon>
						<text>会员权益</text>
					</view>
					<text>成为门店会员，享超值会员福利</text>
				</view>
			</view>
			<!-- 商品图文详情部分 -->
			<view class="goodsDetails">
				<text>{{goodsContent}}</text>
				<!-- <textarea name="" id="" cols="30" rows="10" :value="goodsInfo.content"></textarea> -->
				<view class="image_area" style="text-align: center;">
					<image v-for="(item,index) in imageList" :key="index" :src="item" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 底部购买按钮 -->
		<view class="buyBtn_area">
			<!-- 分享btn -->
			<view class="shareBtn">

				<button open-type="share" class="">
					<u-icon name="weixin-fill" color="#28E06E" size="36"></u-icon>
					<text>分享</text>
				</button>
			</view>
			<!-- 立即购买按钮 -->
			<view class="buyBtn" @click="handleBuy">
				<view class="zz">
					<text>￥{{goodsInfo.price.toFixed(2)}}</text>
					<view class="xx">
						<text>充值购买</text>
						<text>数量少手慢无</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import _ from 'lodash'
	import subScribeMsg from '@/utils/subScribeMsg.js'
	import formatNumber from '@/utils/formatNumber.js'
	import handleCache from "@/utils/cache.js"
	import {
		quickSaleApi,
		userApi,
		commonApi,
		storeApi,
		balanceApi,
	} from '@/api/index.js'
	import {
		ref,
		computed,
		nextTick
	} from 'vue'
	import {
		onReady,
		onShow,
		onLoad,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	const userInfo = ref('')
	const id = ref('')
	const shanghuId = ref('')
	const goodsInfo = ref('')
	const userwallet = ref('')
	const storeInfo = ref('')
	const imageList = ref([])
	const goodsContent = ref('')
	const type = ref(1)

	const shareData = computed(() => { // 分享的数据
		return {
			// title: `${uni.getStorageSync('userInfo').value.shanghuname||''}-充值购`,
			title: `${goodsInfo.value.title}`,
			imageUrl: imageList.value[0],
			path: `/pagesA/recharge_detail/recharge_detail?type=${type.value}&id=${userInfo.value.id}&shanghuid=${userInfo.value.shanghuid}`,
			desc: '快来看看',
		}
	})

	onShow(async () => {
		userInfo.value = handleCache.get('userInfo')
		if (userInfo.value && shanghuId.value) {
			await userApi.userstore({
				uid: userInfo.value.id,
				shanghuid: shanghuId.value
			}).then((res) => {
				if (res.code == 0) {
					let data = {
						...userInfo.value
					}
					data.shanghuid = shanghuId.value
					userInfo.value = data
					handleCache.remove('userInfo')
					handleCache.set('userInfo', data, 'forever')
				}
			})
			await getuserwallet()
		}
		await getDetail();
		await getStore_detail();
		uni.$mpShare = shareData.value
	})
	let youhuiPrice = computed(() => {
		let price = goodsInfo.value.price
		if (userwallet.value && userwallet.value.zhekou) {
			let num = userwallet.value.zhekou / 100
			price = _.multiply(price, num)
		}
		return price
	})
	onLoad((options) => {
		if (options.id) {
			id.value = Number(options.id)
		}
		if (options.type) {
			type.value = Number(options.type)
		}
		if (options.shanghuid) {
			shanghuId.value = Number(options.shanghuid)
		}
		if (options.pid) {
			getApp().globalData.shareUserId = Number(options.pid)
			if (handleCache.get('userInfo')) {
				userApi.bangdingsj({
					uid: handleCache.get('userInfo').id,
					pid: Number(options.pid)
				})
			}
		}
	})
	// 2024-05-16 hdd修改获取单品商品详情接口
	const getDetail = async () => {
		let {
			data
		} = await balanceApi.chongzhi_detail({
			id: id.value,
			uid: userInfo.value.id
		})
		if (data.image != '') {
			var links = data.image.split(",");
			imageList.value = links; // 图片链接
		}
		if (data.content != '') {
			var str = data.content.replace(/\\/g, "%");
			goodsContent.value = unescape(str);
		}
		goodsInfo.value = data;
	}
	const getuserwallet = () => {
		let req = {
			uid: userInfo.value.id,
			shanghuid: userInfo.value.shanghuid
		}
		commonApi.userwallet(req).then((res) => {
			userwallet.value = res.data
		})
	}
	// 充值购买按钮 点击方法
	const handleBuy = async () => {

		if (type.value === 2) {
			await subScribeMsg(['Kj8bNW0GPT0RnaKCVKKT0_ryLsog6V2jrB2T-AwGWJw'])
		}
		let req = {
			uid: userInfo.value.id,
			blockpackageid: goodsInfo.value.id

		}
		uni.showLoading({
			text: '加载中'
		})
		balanceApi.wechatpay(req).then((res) => {
			uni.hideLoading()
			if (res.code === 0) {
				let paydata = res.data
				wx.requestPayment({
					nonceStr: paydata.nonceStr, // 随机字符串
					package: paydata.package, // 固定值
					signType: paydata.signType, // 统一下单订单号 
					timeStamp: paydata.timeStamp, // 时间戳（单位：秒）
					paySign: paydata.sign, // 签名，这里用的 MD5/RSA 签名
					success(res) {
						if (type.value === 2) {
							uni.navigateTo({
								url: "/pagesA/rechargeorder/rechargeorder"
							})
							return
						}
						uni.navigateTo({
							url: '/pages/payresult/payresult?status=1'
						})
					},
					fail(e) {
						uni.navigateTo({
							url: '/pages/payresult/payresult?status=0'
						})

					}
				})
			} else {
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}
	// 获取商户店铺详情接口
	const getStore_detail = () => {
		let req = {
			id: shanghuId.value
		}
		storeApi.storeinfo(req).then((res) => {
			console.log('这是商户详情接口返回：', res)
			storeInfo.value = res.data;
		})
	}
</script>

<style lang="scss" scoped>
	// @import './index.scss'
	.store_back {
		z-index: -1;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
	}

	.store_back image {
		width: 100%;
		height: 15%;
		filter: blur(0px);
	}

	.storeCard {
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		background-color: #F9F9F9;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.mainContent {
		z-index: 3;
		padding: 20rpx;
		margin: 50rpx 0rpx;
		border-radius: 20rpx 20rpx 0 0;

	}

	.store_namelogo {
		display: flex;
	}

	.store_namelogo image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 20rpx;
	}

	.storename {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin-left: 40rpx;
		width: 70%;
	}

	.storename text:first-child {
		font-size: 30rpx;
		font-weight: bolder;

	}

	.storename text:nth-child(2) {
		font-size: 24rpx;
		color: #999999;
	}

	.store_tag {
		margin-top: 20rpx;
		display: flex;
	}

	.store_tag image {
		width: 150rpx;
		height: 30rpx;
	}

	.store_tag_a {
		display: flex;
		align-items: center;
		border: 1px solid #FF6700;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.store_tag_a>text {
		color: #A6A6A6;
		font-size: 22rpx;
		margin: 5rpx 10rpx;
	}

	.store_adress {
		margin-top: 20rpx;
		color: #999999;
		font-size: 24rpx;
	}

	.vipcontent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #999999;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.vipcontent_head {
		display: flex;
		align-items: center;
		white-space: nowrap;
		color: #505050;
		font-size: 28rpx;
	}

	.goodsDetails {
		margin-top: 20rpx;
		font-size: 32rpx;
		font-weight: bolder;
		margin-bottom: 130rpx;
		background: #F5F5F5;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.goodsDetails image {
		border-radius: 20rpx;
		margin: 10rpx 0;
	}

	.buyBtn_area {
		z-index: 2;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		// background-color: #05C160;
		width: 100%;
		display: flex;
	}

	.shareBtn {
		width: 30%;
		height: 100rpx;
		// background-image: url('/static/images/shareBtn.png');
		// background-repeat: no-repeat;
		// background-position: center center;
		// background-size: cover;
		background-color: #fff;
	}

	.shareBtn button {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shareBtn button text {
		font-size: 30rpx;
	}

	.shareBtn button::after {
		border: none !important;
	}

	.buyBtn {
		width: 70%;
		height: 100rpx;
		background-image: url('/static/images/buyBtn.png');
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
		color: #fff;
		font-size: 30rpx;
		font-weight: bolder;
		position: relative;
	}

	.zz {
		position: absolute;
		top: 10%;
		right: 8%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.xx {
		display: flex;
		align-items: center;
	}

	.xx text:nth-child(2) {
		color: #fff;
		margin-left: 10rpx;
		font-size: 22rpx;
		background: rgba(248, 142, 11, 1);
		padding: 2rpx 10rpx;
		border-radius: 10rpx;
	}

	.image_area image:last-child {
		display: none;
	}
</style>